<template>
    <div class="installationStep-container">
        <div class="left-menu-box" >
            <baseDrawer :title="$t('device-edit-install-1')" @changeShow='changeShow' >
                <el-button-group class="marginbottom_10">
                    <el-button icon="el-icon-plus" :title="$t('add')" @click="()=>{$store.commit('setVisibleAdd',true)}"></el-button>
                    <el-button icon="el-icon-edit" :title="$t('edit')" @click="editStep"></el-button>
                    <el-popconfirm
                            :title="$t('index.delete_item_confirm')+'?'"
                            @confirm='deleteStep'
                        >
                        <el-button slot="reference" icon='el-icon-delete' :title="$t('delete')"></el-button>
                    </el-popconfirm>
                </el-button-group>
                <div class="selectItem" v-for="(item,index) in stepList" :id="item.value" :key="index" :class="activeClass ==index?'active':''">
                    <span @click="changeStep(item,index)">{{item.actionStep+' '+item.title}}</span>
                </div>
            </baseDrawer>
        </div>
        <div class="right-menu-box" :style="changeShowFlag?'width: calc(100% - 200px);':'width: 100%;'">
            <div class="button-box">
                <el-button type="primary" icon='el-icon-plus' @click="()=>{$store.commit('setVisibleAdd2',true)}">{{$t('add')}}</el-button>
                <el-popconfirm
                    :title="$t('index.delete_confirm')+'?'"
                    :confirm-button-text="$t('sure')"
                    :cancel-button-text="$t('cancel')"
                    @confirm='deleteBatch()'
                >
                    <el-button slot="reference" icon='el-icon-delete'>{{$t('delete')}}</el-button>
                </el-popconfirm>
                <el-button icon="el-icon-back" @click='()=>{this.$router.go(-1)}' style="margin-left: auto;">{{$t('back')}}</el-button>
            </div>
            <baseTable v-loading="loading" row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
                <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-edit" :title="$t('edit')" @click='editData(data)'></el-button>
                    <el-popconfirm
                        :title="$t('index.delete_item_confirm')+'?'"
                        @confirm='deleteSub(data.sid)'
                    >
                        <el-button type="danger" slot="reference" icon='el-icon-delete' :title="$t('delete')"></el-button>
                    </el-popconfirm>
                </div>
                </template>
            </baseTable>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
            <addModal :snGuideId="stepListId" @uploadPage='uploadPage' v-if="visibleAdd"></addModal>
            <editModal :snGuideId="stepListId" :editStepData='editStepData' @uploadPage='uploadPage'></editModal>
            <addSubModal :snGuideId="stepListId" :snGuideStepId="cur_stepId" @uploadPage='uploadPage' v-if="visibleAdd2"></addSubModal>
            <editSubModal :snGuideId="stepListId" :snGuideStepId="cur_stepId" :editSubStepData='editSubStepData' @uploadPage='uploadPage'></editSubModal>
        </div>
    </div>
</template>

<script>
import baseDrawer from '../../../components/common/baseDrawer'
import baseTable from '../../../components/common/baseTable'
import addModal from './addStep.vue'
import editModal from './editStep.vue'
import addSubModal from './addSubStep.vue'
import editSubModal from './editSubStep.vue'
export default {
    components: {
        baseDrawer,
        baseTable,
        addModal,
        editModal,
        addSubModal,
        editSubModal
    },
    props: {

    },
    data() {
        return {
            stepListId:this.$route.query.stepListId,
            cur_stepId:'',
            activeClass:0,
            changeShowFlag:true,
            stepList:[],
    
            userType:JSON.parse(sessionStorage.getItem('userObj')).userType,
            editStepData:{},
            editSubStepData:{},
            rowDataList:{},
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('device-edit-install-3'),
                value: 'subStep'
            },{
                title: this.$t('device-content'),
                value: 'description'
            },{
                title: this.$t('control'),
                slot: 'option'
            }],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        },
        visibleAdd2(){
            return this.$store.state.sysStore.visibleAdd2
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getSnGuideStepList()
        
    },
    methods: {
        changeShow(flag){
            this.changeShowFlag = flag
        },
        changeStep(data,index){
            this.cur_stepId=data.sid
            this.editStepData=data
            this.activeClass=index
            this.initTable()
        },
        async getSnGuideStepList(id){
            let res = await this.API.getSnGuideStepList({
                id:this.stepListId
            })
            this.stepList=res.object
            if(res.object.length!=0 && this.cur_stepId==''){
                this.changeStep(res.object[0],0)
            }else{
                this.initTable()
            }
        },
        async deleteSub(id){
            let res = await this.API.deleteSubSteps({
                ids:id
            })
            if(res.success){
                this.$message.success(this.$t('index.control_success'))
            }else{
                this.$message.error(this.$t('index.control_fail'))
            }
            this.initTable()
        },
        async deleteBatch(){
            if(this.selectDatalist.length>0){
                let ids = this.selectDatalist.map(item => {
                    return item.sid
                })
                let res = await this.API.deleteSubSteps({
                    ids
                })
                if(res.success){
                    this.$message.success(this.$t('index.control_success'))
                }else{
                    this.$message.error(this.$t('index.control_fail'))
                }
                this.initTable()
            }else{
                this.$message.error(this.$t('index.delete_select'))
            }
        },
        editStep(){
            this.$store.commit('setVisibleEdit',true)
        },
        //删除主步骤
        async deleteStep(){
            if(this.cur_stepId!=''){
                let res = await this.API.deleteSteps({
                    id:this.cur_stepId
                })
                if(res.success){
                    this.$message.success(this.$t('index.control_success'))
                    this.cur_stepId=''
                }else{
                    this.$message.error(this.$t('index.control_fail'))
                }
                this.getSnGuideStepList()
            }else{
                this.$message.error(this.$t('index.delete_select'))
            }
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'FIRM_TYPE',
                lang:localStorage.getItem('lang')
            })
            this.typeList = res.FIRM_TYPE
        },
        async initTable(){
            this.loading = true
            let res = await this.API.getSubSteps({
                id:this.cur_stepId
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        editData(data){
            this.$store.commit('setVisibleEdit2',true)
            this.editSubStepData = data
        },
        uploadPage(){
            this.getSnGuideStepList()
        },
        query(){
            this.current = 1
            this.initTable()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        },
    },
};
</script>

<style lang="less">
.installationStep-container{
    display: flex;
    height: 100%;
    font-size: 14px;
    width: 100%;
    font-size: 14px;
    .right-menu-box{
        flex: 1;
    }
    .selectItem{
        span{
            display:block;
            padding: 5px;
            font-size: 13px;
        }
        &:hover,&.active{
            background:#FEA429;
            cursor: pointer;
        }
    }
    .el-card{
        margin-bottom: 10px;
    }
    .el-card__header{
        padding: 8px;
    }
    .text.item{
        padding: 3px 0;
        width: 300px;
        display: inline-block;
    }
}

</style>
